<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<div class="title" style="background: #ff943e;">
				<el-icon class="icon"><el-icon-user-filled /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
			</div>
			<div class="content">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">请选择</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-form-item label="流程名称">
							<el-select v-model="form.setType" @change="changeSetType">
								<el-option :value="1" label="请假流程"></el-option>
								<el-option :value="2" label="备案流程"></el-option>
							</el-select>
							<el-link>连接</el-link>
						</el-form-item>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script setup name="subprocess">
	import {
		ref,
		watch,
		nextTick,
		inject,
		onMounted
	} from 'vue'
	import addNode from './addNode.vue'

	// Injections
	const select = inject('select')

	// Props
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		}
	})

	// Emits
	const emit = defineEmits(['update:modelValue'])

	// Refs
	const nodeConfig = ref({})
	const drawer = ref(false)
	const isEditTitle = ref(false)
	const form = ref({
		setType: 1
	})
	const nodeTitle = ref(null)

	// Watchers
	watch(() => props.modelValue, (newVal) => {
		nodeConfig.value = newVal
	})

	// Lifecycle
	onMounted(() => {
		nodeConfig.value = props.modelValue
	})

	// Methods
	const show = () => {
		form.value = {}
		form.value = JSON.parse(JSON.stringify(nodeConfig.value))
		drawer.value = true
	}

	const editTitle = () => {
		isEditTitle.value = true
		nextTick(() => {
			nodeTitle.value.focus()
		})
	}

	const saveTitle = () => {
		isEditTitle.value = false
	}

	const save = () => {
		emit("update:modelValue", form.value)
		drawer.value = false
	}

	const delNode = () => {
		emit("update:modelValue", nodeConfig.value.childNode)
	}

	const delUser = (index) => {
		form.value.nodeAssigneeList?.splice(index, 1)
	}

	const delRole = (index) => {
		form.value.nodeAssigneeList?.splice(index, 1)
	}

	const selectHandle = (type, data) => {
		select(type, data)
	}

	const changeSetType = () => {
		form.value.nodeAssigneeList = []
	}

	const toText = (nodeConfig) => {
		if (!nodeConfig) return false

		switch (nodeConfig.setType) {
			case 1:
				if (nodeConfig.nodeAssigneeList?.length > 0) {
					return nodeConfig.nodeAssigneeList.map(item => item.name).join("、")
				}
				return false
			case 2:
				return nodeConfig.examineLevel === 1 ?
					'直接主管' :
					`发起人的第${nodeConfig.examineLevel}级主管`
			case 3:
				if (nodeConfig.nodeAssigneeList?.length > 0) {
					return '角色-' + nodeConfig.nodeAssigneeList.map(item => item.name).join("、")
				}
				return false
			case 4:
				return "发起人自选"
			case 5:
				return "发起人自己"
			case 7:
				return "连续多级主管"
			default:
				return false
		}
	}

	// Expose methods if needed
	defineExpose({
		show
	})
</script>

<style>

</style>